<template>
    <div class="calendar">

        <div class="week-list">
            <p class="week-list-one">日</p>
            <p class="week-list-one">一</p>
            <p class="week-list-one">二</p>
            <p class="week-list-one">三</p>
            <p class="week-list-one">四</p>
            <p class="week-list-one">五</p>
            <p class="week-list-one">六</p>
        </div>
        <keep-alive>
            <div class="swiper-box">
                <swiper :options="swiperOption" ref="slideBox">
                    <swiper-slide v-for="(item, index) of dateList" :key="index">
                        <div class="calendar-day">
                            <div class="calendar-day-one" 
                                v-for="(item, index) of item" 
                                :key="index"
                                @click="chooseDate(item)"
                            >
                                <div class="calendar-circle" 
                                    :class="item.styleClass"
                                >
                                    <p class="date-new">{{ item.day }}</p>
                                    <p class="date-trad">{{ item.traditionDay }}</p>
                                </div>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </keep-alive>
    </div>
</template>

<script>
export default {
    name: "Calendar",
    data () {
        var _this = this;
        return {
            dateList: [],
            dateShowNum: 42,
            showMonthNum: 5,
            chooseMonth: '',
            chooseYear: '',
            isTouchMove: false,
            lastChoose: [],
            swiperIsStart: false,
            swiperPageIndex: null,
            swiperOption: {
                autoplay: false,
                initialSlide: 0,
                on: {
                    init () {
                        _this.swiperIsStart = true;
                        _this.swiperPageIndex = 0;
                    },
                    touchMove () {
                     
                        _this.isTouchMove = true;
                    },
                    slideChangeTransitionStart (){
                        if (!_this.swiperIsStart) return false;
                        var lastPageIndex = _this.swiperPageIndex;
                        var activeIndex = this.activeIndex;
                        if (lastPageIndex < activeIndex) {
                            
                            _this.$emit('slide', 'right');   
                            _this.slideSwiper('right');
                            _this.isTouchMove = false;
                            
                        } else {
                            _this.$emit('slide', 'left');
                            _this.slideSwiper('left');
                            _this.isTouchMove = false;
                            
                        }
                        _this.swiperPageIndex = activeIndex;
                    },
                }
            }
        }
    },
    methods: {
        toToday () {
           let swiper = this.$refs.slideBox.swiper;
           let date = new Date();
           swiper.slideTo(0);
           this.chooseDateNotNowStyle({
               year: date.getFullYear(),
               month: date.getMonth() + 1,
               day: date.getDate()
           })
        },
        figureClass (isToday, isChoose, isThisMonth) {
            if (!isThisMonth) return "class5";      //不是本月
            if (isToday && isChoose) return "class1"; // 当前日期 选中
            if (!isToday && isChoose) return "class2"; // 非当前  选中
            if (isToday && !isChoose) return "class3"; //当前 非选中
            if (!isToday && !isChoose) return "class4"; // 非当前 非选中
        },
        slideSwiper (direction) {                   //页面左右滑动，更新选中日期
          
            let day;
            if (direction === 'left') {             //左滑动需要判断是否是首页
                
                let date = new Date();
                let nowMonth = date.getMonth() + 1;
                let nowDay = date.getDate();
                
                this.chooseYear = this.getYear(this.chooseYear, this.chooseMonth - 1);
                this.chooseMonth = this.getMonth(this.chooseMonth - 1);
                
                if (nowMonth === this.chooseMonth) {
                    day = nowDay;
                } else {
                    day = 1;
                }
                
            } else {                                //右不需要
                this.chooseYear = this.getYear(this.chooseYear, this.chooseMonth + 1);
                this.chooseMonth = this.getMonth(this.chooseMonth + 1);
                day = 1;
            }

            if (!this.isTouchMove) return;

            this.chooseDateNotNowStyle({
                year: this.chooseYear,
                month: this.chooseMonth,
                day: day
            });
            this.$emit("update", this.chooseYear, this.chooseMonth, day);
            
        },
        chooseDateNotNowStyle (date) {              //修改不是本日的日期样式
            var datas = this.dateList;
            for (var i = 0; i < datas.length; i++) {
                var len = datas[i].length;
                for (var j = 0; j < len; j++) {
                    datas[i][j].isChoose = false;
                    datas[i][j].styleClass = this.figureClass(datas[i][j].isToday, datas[i][j].isChoose, datas[i][j].isThisMonth);
                    if (   date.year === datas[i][j].year 
                        && date.month === datas[i][j].month 
                        && date.day === datas[i][j].day 
                        && datas[i][j].isThisMonth ) 
                    {
                        datas[i][j].isChoose = true;   
                        datas[i][j].styleClass = this.figureClass(datas[i][j].isToday, datas[i][j].isChoose, true);
                    }
                }
            }
        },
        chooseDate (item) {
            var datas = this.dateList;
            
            //获取选中的年，月，日
            var year = item.year;
            var month = item.month;
            var day = item.day;

            
            //更新全局变量选中的日期
            window.localStorage.chooseDate = JSON.stringify({
                year: year,
                month: month,
                day: day
            });
            //获取当前的年，月，日
            var date = new Date();
            var nowYear = date.getFullYear();
            var nowMonth = date.getMonth() + 1;
            var nowDay = date.getDate();
            
            //若不是本月的日期，判断是否可转动，转动的方向
            if (!item.isThisMonth) {
                let swiper = this.$refs.slideBox.swiper;
                if (item.index <= 7) {
                    if (swiper.clickedIndex === 0) return;
                    swiper.slidePrev();
                    this.chooseDateNotNowStyle(item);
                    this.$emit("update", year, month, day);
                    //更新选中日期的详细信息
                    this.$emit("changeDetail", item);
                }
                if (item.index >= 28) {
                    if (swiper.clickedIndex === 4) return;
                    swiper.slideNext();
                    this.chooseDateNotNowStyle(item);
                    this.$emit("update", year, month, day);
                    //更新选中日期的详细信息
                    this.$emit("changeDetail", item);
                }

                return ;
            }
            
            //为所有日期添加样式
            for (var i = 0; i < datas.length; i++) {
                var len = datas[i].length;
                for (var j = 0; j < len; j++) {
                    datas[i][j].isChoose = false;
                    datas[i][j].styleClass = this.figureClass(datas[i][j].isToday, datas[i][j].isChoose, datas[i][j].isThisMonth);
                }
            }

            //为选中日期添加样式
            item.isChoose = true;
            item.styleClass = this.figureClass(item.isToday, item.isChoose, true);

            
            //更新选中日期的详细信息
            this.$emit("changeDetail", item);
            
            //是否为今天，更新顶部多少天后
            
            this.$emit("update", year, month, day);
        },
        getYear (year, month) {
            if (month < 1) return year - 1;
            if (month > 12) return year + 1;
            return year;
        },
        getMonth (month) {
            if (month < 1) return month + 12;
            if (month > 12) return month - 12;
            return month;
        },
        getMonthDayNum (year, month) {
            if (month < 1) {
                year --;
                month = 12;
            }
            if (month > 13) {
                year ++;
                month = 1;
            }
            switch(month) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        return 31;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        return 30;
                    case 2:
                        return year % 4 === 0 ? 29 : 28;
            }
        },
        createDate (year, month) {
            var nowYear = new Date().getFullYear();
            var nowMonth = new Date().getMonth() + 1;
            var nowDay = new Date().getDate();
            var result = new Array(this.dateShowNum);
            var date = new Date(year, month - 1, 1);    // 获取该月一号的日期对象
            var monthDayNum = this.getMonthDayNum(year, month); // 获取该月的天数
            var firstDayWeek = date.getDay();       //获取该月的一号是周几
            var lastMonthShowNum = firstDayWeek;    // 该页面应显示上个月的天数
            var lastMonthDayNum = this.getMonthDayNum(year, month - 1); //上个月的天数
            var lastMonthFirstDay = lastMonthDayNum - lastMonthShowNum + 1; //显示的上个月的第一天
            var nextMonthShowNum = this.dateShowNum - lastMonthShowNum - monthDayNum; // 该页面应显示上个月的天数
            var netxMonthDayNum = this.getMonthDayNum(year, month + 1); //下个月的天数
            var nextMonthFirstIndex = monthDayNum + lastMonthShowNum;
            for (let i = 1; i <= monthDayNum; i++ ) {
                result[firstDayWeek - 1 + i] = {
                    index: firstDayWeek - 1 + i,
                    year: year,
                    month: month,
                    day: i,
                    traditionDay: '廿五',
                    isToday: year === nowYear && month == nowMonth && i === nowDay ? true : false,
                    isChoose: year === nowYear && month == nowMonth && i === nowDay ? true : false,
                    isThisMonth: true
                };
                let isToday = result[firstDayWeek - 1 + i].isToday;
                let isChoose = result[firstDayWeek - 1 + i].isChoose;
                let isThisMonth = result[firstDayWeek - 1 + i].isThisMonth;
                result[firstDayWeek - 1 + i].styleClass = this.figureClass(isToday, isChoose, isThisMonth);
            }
            for (let i = 0; i < lastMonthShowNum; i++) {
                result[i] = {
                    index: i,
                    year: this.getYear(year, month - 1),
                    month: this.getMonth(month - 1),
                    day: lastMonthFirstDay + i,
                    traditionDay: '廿五',
                    isToday: this.getYear(year, month - 1) === nowYear && this.getMonth(month - 1) == nowMonth && lastMonthFirstDay + i === nowDay ? true : false,
                    isChoose: this.getYear(year, month - 1) === nowYear && this.getMonth(month - 1) == nowMonth && lastMonthFirstDay + i === nowDay ? true : false,
                    isThisMonth: false
                };
                let isToday = result[i].isToday;
                let isChoose = result[i].isChoose;
                let isThisMonth = result[i].isThisMonth;
                result[i].styleClass = this.figureClass(isToday, isChoose, isThisMonth);
              
            }
            for (let i = 0; i < nextMonthShowNum; i++) {
                result[nextMonthFirstIndex + i] = {
                    index: nextMonthFirstIndex + i,
                    year: this.getYear(year, month + 1),
                    month: this.getMonth(month + 1),
                    day: i + 1,
                    traditionDay: '廿五',
                    isToday: this.getYear(year, month + 1) === nowYear && this.getMonth(month + 1) == nowMonth && i + 1 === nowDay ? true : false,
                    isChoose: this.getYear(year, month + 1) === nowYear && this.getMonth(month + 1) == nowMonth && i + 1 === nowDay ? true : false,
                    isThisMonth: false
                    
                };
                let isToday = result[nextMonthFirstIndex + i].isToday;
                let isChoose = result[nextMonthFirstIndex + i].isChoose;
                let isThisMonth = result[nextMonthFirstIndex + i].isThisMonth;
                result[nextMonthFirstIndex + i].styleClass = this.figureClass(isToday, isChoose, isThisMonth);
            }
            return result;    
        
        },
        updateDetailToday () {
            //更新日期详细信息
            let item = null;
            let dateList = this.dateList;
            for (let i = 0; i < dateList.length; i++)
            {
                for (let j = 0; j < dateList[i].length; j++)
                {
                    if (   dateList[i][j].isThisMonth 
                        && dateList[i][j].isToday)
                        {
                            item = dateList[i][j];
                        }
                }
            }
            this.$emit("changeDetail", item);
        },
        initDate () {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dateList = [];
            dateList.push(this.createDate(year, month));
            this.chooseMonth = month;
            this.chooseYear = year;
            for (let i = 0; i < this.showMonthNum - 1; i++) {
                var _year = this.getYear(year, month + i + 1);
                var _month = this.getMonth(month + i + 1);
                
                dateList.push(this.createDate(_year, _month));
            }
            
            var dateDatas = window.valueBus.dateDatas;
            var dateIndex = 0;
            if (dateDatas === undefined) {
                
                dateDatas = JSON.parse(localStorage.getItem('dateDatas'));
            }
            for (let i = 0, len = dateList.length; i < len; i++)
            {
                for (let j = 0, Len = dateList[i].length; j < Len; j++)
                {
                    dateList[i][j].animalYear = dateDatas[dateIndex].animal_year;
                    
                    if (dateDatas[dateIndex].china_festival)
                    {
                        dateList[i][j].festival = dateDatas[dateIndex].china_festival;    
                        dateList[i][j].traditionDay = dateDatas[dateIndex].china_festival;
                    } 
                    else if (dateDatas[dateIndex].common_festival)
                    {
                        dateList[i][j].festival = dateDatas[dateIndex].common_festival;
                        dateList[i][j].traditionDay = dateDatas[dateIndex].common_festival;
                    }
                    else
                    {
                        dateList[i][j].festival = "";
                        dateList[i][j].traditionDay = dateDatas[dateIndex].date_trad;
                    }
                    
                    dateIndex ++;
                }
            }

            //更新dom
            this.dateList = dateList;

            
            
            //更新全部变量的选中日期
            window.localStorage.chooseDate = JSON.stringify({
                year: year,
                month: month,
                day: date.getDate()
            });
            
            this.updateDetailToday();
           
            
            
        },
        
    },
    mounted () {
        this.initDate();
        
    }
}
</script>

<style lang="stylus" scoped>
    .calendar >>> .swiper-wrapper 
        display flex
    .calendar >>> .swiper-slide 
        flex-shrink 0   
    .calendar
        width 100%
        height 10rem
        margin-top .7rem
        .week-list
            width 100%
            height .8rem
            border-bottom .02rem solid whitesmoke
            display flex
            .week-list-one
                height 100%
                line-height .8rem
                flex-grow 1
                text-align center
                font-size .3rem
                color gray
        .swiper-box 
            width 100%
            height 9.2rem
            overflow hidden
            .swiper-slide
                float left
                
                .calendar-day
                    width 100%
                    height 9.2rem
                    flex-shrink 0
                    display flex
                    flex-wrap wrap
                    .calendar-day-one
                        width 14.28%
                        height 16.6%
                        display flex
                        align-items center
                        justify-content center
                        flex-shrink 0
                        overflow hidden
                        .class1
                            background #207e82
                            .date-new
                                color white
                            .date-trad
                                color white 
                        .class2 
                            border .02rem solid gray
                            .date-new
                                color #000
                            .date-trad
                                color gray
                        .class3 
                            background transparent
                            .date-new
                                color #207e82
                            .date-trad
                                color gray
                        .class4
                            background transparent
                            .date-new
                                color #000
                            .date-trad
                                color gray
                        .class5
                            background transparent
                            .date-new
                                color gray
                            .date-trad
                                color #C3C3C3

                        .calendar-circle
                            width 1.4rem
                            height 1.4rem
                            border-radius 50%
                            display flex
                            flex-direction column
                            justify-content center
                            align-items center
                            .date-new
                                font-size .5rem
                            .date-trad
                                font-size .3rem
                                margin-top .15rem
                    

        
</style>


